<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <style type="text/css">
        /* 元素属性选择器--对应元素属性 可以更加复杂 = ^= $= *= ~= |=*/
        /* [class~="class2"] {
            border: thin black solid;
            padding: 4px;
        } */
        [lang|="en"] {
            border: thin black solid;
            padding: 4px;
        }
    </style>
</head>

<body>
    <a lang="en-us" class="class1 class2" href="http://apress.com">Visit the Apress website</a>
    <p>I like <span lang="en-gb" class="class2">apples</span> and oranges.</p>
    <a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>

</html>